昨天我們大致上地說了<!DOCTYPE html>
,<html></html>
,<head></head>
三者的功用,以及內裡常見的內容。今天,我們來討論最後一個項目,< body></body>
。它的角色,就等同於速遞包裹裡的貨物,是整個包裹裏最重要的一部分,是html的主要內容,關於網頁基本結構的編碼,大多數都是在這裡。不過html的編碼數量蠻多,不可能盡錄於文章內,所以在這裡,我們將會輯錄一些在製作wordpress,編寫wordpress主題時,最常見到,使用率亦最高的編碼,讓你之後能夠更容易掌握。
在開始之前,我們要先理解一件事,就是網站,其實是又一個個長方格所組成的
我們利用google開發者工具來實證看看吧,這樣大家印象會更深刻點。打開google chorme,去隨便一個網站,然後按滑鼠右鍵,點選檢查,點選指標的圖案,這時候你的指標指向網頁的畫面,就會見到,每個項目都像一樣下圖一樣,是被一個長方格所包圍著的。
div和span,是兩個我們平時最常見到的編碼。剛才不是說整個網站都是又方格所組成嗎?而div就可以要來組成那些方格的,看看下面這個例子。
我們進入維基百科,然後打開之前的開發者工具,我們指向文章空白的地方,就會留意到整篇文章都是給div所包裹著
不過為什麼會這樣?假如你打開報章,你就會看到,他們每篇文章,都會在一個方格內分隔著彼此。
而div做工作的就是類似了,不過這裡有點特別的地方,是div必須要和css合作,才能夠生成,並隨意調整方格,做到像報章般的切版一樣
<div>……</div>
至於span呢?我們在用word檔打報告的時候,假若有文中有部分字眼,需要粗體的時候,我們會先用滑鼠把需要粗體的字highlight,然後再把它調整成粗體,對吧?
span就是在做著highlight的工作,它不會像div那樣,會佔著一整行的空間,它就只是標註著特定位置,然後默默地給予修飾。
<p>xxxx<span>……</span>xxxx</p>
p代表文章,我們下方會提及
只要有文句,這兩個就會出現。p 就是文章 ,最理想的情況,是每一段都用一個p 內包著,這樣就能夠用css做到更細微的調整。情況就好像word檔案裡面一樣,雖說您可以透過空格鍵,(html的編碼為)來分隔段與段之間,但這樣固定了需要間隔最少一行,若透過設定段落間距來,則能夠設定到小數點值,做到更細微的調整
<p>……………….</p>
至於h1至h6,則是標題,數字越大代表字體越大。看下圖:
<h1> 你好 </h1>
<h2> 你好 </h2>
<h3> 你好 </h3>
<h4> 你好 </h4>
<h5> 你好 </h5>
<h6> 你好 </h6>
它們兩個可要來加入列表,前者是點列,而後者則是數字列表。
點列
<ul>
<li>
</li>
</ul>
數字列表
<ol>
<li>
</li>
</ol>
不過<ul>
, <li>
還有個意想不到的功用,就是我們可以用它來製作選單。雖說樣子看起來很不像,但對於html來說,選單也是層層遞進,是有連結的列表來的,而, 正好能做到這工作。以往,html是有menu這編碼可用的,但隨著版本的更替,menu已不再可用,取而代之,官方建議使用,
這樣做也有另一個好處,就是能夠讓對於要使用閱讀器的視障人士,更為友善。因為當閱讀器讀到那裏時,可以告訴到用家,這裡是列表,不是一定需要看,讓用家自行判斷。是否需要讀下去。同時因為為列表格式,這樣閱讀器也能夠簡單地數出並說出有多少項,讓用家選擇,要看哪項,提升用戶體驗。
我們來看看wordpress官網,當你用google開發者工具點點看他們的選單,你就會看到,他們也是用ul li
至於如何讓列表向橫,以及讓那些點不顯示?這些就要依靠css
這三項,和div相近,同樣需要和css合作,才能發揮到作用,做到切版的工作。而他們和div的分別有兩點:
告訴用家或開發者,這部分是頁首。較常見的用法,是用他來包裹著網頁選單,logo等部份。
上圖為bbc新聞網頁,透過google開發者工具,您可以留意到,他的選單和logo,是由header包裹著。
不過除似之外,他還有另一個用法,您可以用它包裹著頁面的標題、作者名稱等。
上圖為wordpress官網,透過google開發者工具,您可以留意到,他中間的標題,是由header包裹著。
、
告訴用家或開發者,這部分是選單,不過這不一定要在頁首的選單才能用,只要該選單能夠讓用家瀏覽網站各個頁面,均可以使用
上圖為wikipedia官網在頁首部分的nav
上圖為apple官網在頁底部分的nav
告訴用家或開發者,這部分是頁尾。一般而言會包括版權、免責聲明等
上圖為wikipedia官網footer的部分
假如你需要連接圖片,就會需要用到這個編碼。
<img src="111.jpg" alt="" width="50" height="50">
img 比較特別,並不需要</img>
來關閉的。
img src= 代表圖片的位置,可以是網頁連結,也可以是檔案位置
alt為圖片替代文字,可給予使用閱讀器的視障人士,經替代文字,了解圖片內容。同時,由於goolge搜尋器不能分析圖片內容,所以也是依靠著alt來了解圖片。
width和height並不一定需要,加入後可要來調整圖片大小,不過建議先調整照片後再放上去,因為若透過這裡調整,那麼將會先上載一張過大的照片,接著再調整照片大小,這將會延長了載入時間。
當需要建立超連結,就會用到。這個超連結除了連接去其他網站外,亦可連接到其他html檔案,同一頁面內的其他位置(這個會在class、id裏再說明)等。
<a href="https://example.com">Website</a>
a href=:這裡可放需要連結的地方。</a>
前:想連結的文字,亦可透過 img src ,讓圖片成為超連結
<a href="https://example.com"><img src="xxx.jpg" alt="" ></a>
就好像每個人都有名字和身份證明文件,來識別你的身份一樣。在html也有,相同的機制,他們就是class和id。Class就好像名字,可以和其他人重複,所以編碼和編碼之間,用的class,是可以相同的。
Id則好像身份證明文件,它是獨一無二的,絕不會出現重複出現,所以在同一個html檔案裏,每個id絕對只能夠使用一次。
不過他們實際有何用途?雖說我們可以透過去指令div,h1等html編碼,來讓css修飾他們。不過問題是,假如你希望不同地方的html編碼,樣式上有著不同的時候,例如希望文章內每個h1都用不同顏色時,單純只是指令那些編碼,就會做不到這效果。這也就是class 和 id 會出現的原因啦。
在選擇時,主要可以考慮以下兩點
1 您希望你的修飾僅出現在這個位置,還是希望在其他地方也可以使用?
2 是否需要設定內連結? id可以用來設定,通常網頁是不是會有一個回到頂部的按鈕,或者在文章內,是不是有一個目錄,直接連接到想看的地方,這些通常都是設定一個連結,然後連接到所屬的id,以做到這效果
例子:
wikipedia裏的內連結,#代表著需要前往的id,所以這裡它要連的id為行政區域。
然後這裡可以看到在文章內的行政區域標題,id設定為行政區域。
所以當在上面目錄按行政區域時,就會直接鏈接到在寫行政區域的地方
假如需要用到按鈕,那麼就需要用到button
<button type="button" value="login"> login </button>
button type: 告訴瀏覽器該按鈕的功能,button代表他只是一個按鈕,暫時沒任何特別功能。除button外,亦可轉換為submit和reset。Submit代表遞交,而rest則代表重設表格內容。
value: 設定按完按鈕後,將會用分類這個遞交的資料,是什麼資料,這有助你之後查閱。
上圖是維基百科登入畫面,這裡可以看到他把value設定為登入,所以當你登入時,系統就會知道,你現在在登入,然後看看有沒有這個用戶,假如正確就會把你傳送到會員畫面。
<!-- -->
能夠作為一個文字描述用,它正常是不會被電腦讀取的,主要是要來幫你去解釋那些編碼是做什麼而用。
例如這樣子:
<!--heading -->
大家之後,也不妨可以加入一些文字描述,這樣能夠防止你之後再回來的時候,忘了自己在幹啥,也能讓之後的開發者,花費更少時間去看你的程式碼(當然,還是要你寫得清晰),也可以作為你的筆記來使用。在之後會介紹的visual studio code,只需要按crtl/or command/就能夠生成了,這功能在css也是有呀,雖然樣子有點不同就是了,是這樣子的/**/。
當然html內裡還有非常多的內容,我們並沒有提及,不過在這兩天文章所提及的知識,已經基本足夠你之後再作wordpress主題了,假如希望詳細了解,可以到mdn web docs,個人認為這網站,比w3chool來得較容易理解。此外,亦可多查閱其他著名網站的程式碼,從中學習。
好了,今天我們就說到這裏了,明天將會帶你去認識一個結合了css、html、javascript的框架:bootstrap,讓不會css的你,也能快速掌握,並更為熟習html。